<template>
  <div class="bg_boxx">
    <div :id="aMapId" :style="{ width: '100%', height: '100%' }"></div>
    <div>
        <el-select class="float_select" :disabled="isEdit" v-model="selectType" placeholder="请选择" @change="changeDraw"> 
            <el-option
            v-for="item in drawType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <div v-show="showEdit" class="float_btn" @click="saveArea">确定</div>
        <div v-if="selectType === 1">
            <div v-show="showEdit" class="float_btn_save" :class="{ active_btn: isAdd }" @click="drawPolygon">绘制</div>
            <div v-show="showEdit" class="float_btn_edit" @click="editArea">{{ !isEdit ? '编辑' : '结束' }}</div>
            <div v-show="showEdit && !isEdit" class="float_btn_delete" @click="clearMap()">清除</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DrawMap',
  props: {
    propsArea: {
      type: Array,
      default: () => []
    },
    aMapId: {
      type: String,
      default: 'drawMap'
    },
    propsPoint:{
      type: Array,
      default: () => []  
    },
    showEdit: {
      type: Boolean,
      default: true
    }
  },
  data(){
      return {
          map:null,
          mouseTool: null,
          isAdd: false,
          areas: [],
          tux: [],
          editList:[],
          point:[],
          isEdit: false,
          selectType: 0,
          drawType:[
              { label:'点', value: 0 },
              // { label:'面', value: 1 }
          ]
      }
  },
  mounted(){
      if(this.propsPoint.length && this.propsPoint[0]){
          this.selectType = 0
          this.point = JSON.parse(JSON.stringify(this.propsPoint))
      }
      // if(this.propsArea.length){
      //     this.selectType = 1
      //     this.areas = JSON.parse(JSON.stringify(this.propsArea))
      // }
      this.initMap()
  },
  methods:{
    clearMap() {
      this.areas = []
      this.tux = []
      this.editList = []
      this.point = []
      this.map.clearMap()
    },
    initMap() {
        let user = JSON.parse(sessionStorage.getItem('userID'))
        let center = [user.longitude, user.latitude]
        this.map = new AMap.Map(this.aMapId, { // eslint-disable-line
            pitch: 70,
            heightFactor: 2,
            zoom: 12,
            center: center
        })
        this.map.on('click', this.setPoint)
        this.mouseTool = new AMap.MouseTool(this.map) // eslint-disable-line
        this.mouseTool.on('draw', this.getDraw)
        if (this.areas.length) {
            this.drawExistPolygon()
        }
        console.log('point',this.point)
        if(this.point.length){
            this.drawPoint()
        }
    },
    drawPoint(){
            var marker = new AMap.Marker({
            position: new AMap.LngLat(this.point[0], this.point[1]),
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            offset: new AMap.Pixel(-25,0), // 设置点标记偏移量
            anchor:'bottom-left', // 
        });
        marker.setMap(this.map);
    },
    changeDraw(val){
        this.clearMap()
        if(val === 1){
            this.map.off('click', this.setPoint);
            this.map.on('doubleclick', this.getPoint)
        }else{
            this.map.on('click', this.setPoint)
            this.map.off('doubleclick', this.getPoint)
        }
    },
    getPoint(e) {
        console.log(e)
        if (this.isAdd) {
            this.areas[this.areas.length - 1].push([e.lnglat.getLng(), e.lnglat.getLat()])
        } 
    },
    setPoint(e){
        this.map.clearMap()
        this.point = [e.lnglat.getLng(), e.lnglat.getLat()]
            var marker = new AMap.Marker({
            position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            offset: new AMap.Pixel(-25, 0),
            anchor:'bottom-left', // 
        });

        marker.setMap(this.map);
    },
    getDraw(e) {
      this.isAdd = false
      this.tux.push(e.obj)
      let path = e.obj.getPath()
      path.forEach((item) => {
        let arr = [item.lng, item.lat]
        this.areas[this.areas.length - 1].push(arr)
      })
      this.mouseTool.close()
    },
    drawPolygon() {
      this.areas.push([])
      this.mouseTool.polygon({ // eslint-disable-line
        strokeColor: '#FF33FF',
        strokeOpacity: 1,
        strokeWeight: 6,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: 'solid'
      })
      this.isAdd = true
    },
    drawExistPolygon(arr) {
      let data = arr || this.propsArea
      data.forEach((item) => {
        let path = []
        item.forEach((el) => {
          path.push(new AMap.LngLat(el[0], el[1])); // eslint-disable-line
        })
        let polygon = new AMap.Polygon({ // eslint-disable-line
          path: path,
          strokeColor: '#FF33FF',
          strokeOpacity: 1,
          strokeWeight: 6,
          fillColor: '#1791fc',
          fillOpacity: 0.4,
          strokeStyle: 'solid'
        })
        this.tux.push(polygon)
        this.map.add(polygon)
      })
    },
    saveArea () {
        if(this.selectType === 1){
            if (this.isEdit) {
                this.$message.warning('请先结束编辑过程！')
                return
            }
            this.$emit('saveErae', this.areas)
        }else{
            this.$emit('saveErae',this.point)
        }  
    },
    editArea() {
      if (this.isEdit) {
        this.isEdit = false
        let list = []
        this.tux.forEach((el) => {
          let path = el.getPath()
          let arr = []
          path.forEach((pa) => {
            arr.push([pa.lng, pa.lat])
          })
          list.push(arr)
        })
        this.areas = list
        this.editList.forEach((item) => {
          item.close()
        })
      } else {
        this.tux.forEach((item) => {
            let polyEditor = new AMap.PolyEditor(this.map, item) // eslint-disable-line
            polyEditor.open()
            this.editList.push(polyEditor)
        })
        this.isEdit = true
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.bg_boxx {
  width: 100%;
  height: 100% !important;
  position: relative;
}
.float_btn {
  position: absolute;
  top: 20px;
  left: 100px;
  width: 60px;
  height: 28px;
  background: #00334a;
  border: 1px solid #00fefd;
  opacity: 0.73;
  border-radius: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  color: #ccf2ff;
  cursor: pointer;
}
.float_select {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
}
.active_btn {
  color: #f0f !important;
  border: 1px solid #f0f !important;
}
.float_btn_save {
  position: absolute;
  top: 20px;
  left: 180px;
  width: 60px;
  height: 28px;
  background: #00334a;
  border: 1px solid #00fefd;
  opacity: 0.73;
  border-radius: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  color: #ccf2ff;
  cursor: pointer;
}
.float_btn_edit {
  position: absolute;
  top: 20px;
  left: 260px;
  width: 60px;
  height: 28px;
  background: #00334a;
  border: 1px solid #00fefd;
  opacity: 0.73;
  border-radius: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  color: #ccf2ff;
  cursor: pointer;
}
.float_btn_delete {
  position: absolute;
  top: 20px;
  left: 340px;
  width: 60px;
  height: 28px;
  background: #00334a;
  border: 1px solid #00fefd;
  opacity: 0.73;
  border-radius: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  color: #ccf2ff;
  cursor: pointer;
}
</style>
